<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <title>发表博客</title>
</head>

<body>

  <input type="file" id="image" />
  <button id="btn">上传</button>

  <!-- <form action="" method="post"> -->
  <p> 标题：<input id="title" type="text"></p>
  <p> 摘要：<input id="abstract" type="text"></p>
  <p> 内容：<textarea name="" id="content" cols="30" rows="10"></textarea></p>
  <button id="post">发布</button>
  <!-- </form> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/tinymce/tinymce.min.js"></script>
  <script src="./js/main.js"></script>
  <script>

    // 上传图片
    btn.addEventListener("click", () => {
      let file = document.querySelector('#image').files[0];
      let formData = new FormData();
      formData.append("uploadFile", file);

      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      axios
        .post("/admin/uploadImage", formData, config)
        .then(function (res) {
          if (res.data.success) {
            alert('文件上传成功')
            blog.image = res.data.data.filePath//保存图片路径
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }, false);

    // 初始化富文本编辑器
    tinymce.init({
      selector: '#content',
      language: 'zh_CN',//注意大小写setup: function(editor){ 
      setup: function (editor) {//ajax同步内容
        editor.on('change', function () { editor.save(); });
      },
    });

    // 发布文章
    const title = document.getElementById('title')
    const abstract = document.getElementById('abstract')
    const content = document.getElementById('content');
    const postBtn = document.getElementById('post');

    const blog = {}
    postBtn.onclick = function () {
      blog.title = title.value
      blog.abstract = abstract.value
      blog.content = content.value
      axios.post('/admin/postBlog', blog).then(res => {
        alert(res.data)
      })
    }

  </script>
</body>

</html>